<template>
  <div class="login">
    <van-icon name="arrow-left" @click="GOback" />
    <div class="login-top">
      <img :src="url1" alt="" />
      <span>欢迎来到爱课！</span>
    </div>
    <div class="login-center">
      <input type="text" v-model="username" placeholder="请输入手机号" />
      <input type="password" v-model="password" placeholder="请输入密码" />
      <button @click="handleclick1">登录</button>
      <div class="goregistry" @click="gotoregistry">
        <span></span><span>>>>没有账号去注册</span>
      </div>
    </div>
  </div>
</template>
<script>
import url1 from "../../assets/images/GrowingImages/成就-头像.png";
import { ref } from "vue";
import { Dialog, Icon } from "vant";
import { useRouter } from "vue-router";
export default {
  components: {
    vanIcon: Icon,
  },
  setup() {
    // 登录功能
    const { username, password, msg, handleclick1 } = loginfun();

    // 去注册页面
    const { gotoregistry } = gore();
    //返回前一个界面
    const { GOback } = goback();
    return {
      url1,
      username,
      password,
      msg,
      handleclick1,
      gotoregistry,
      GOback,
    };
  },
};

// 登录功能实现
const loginfun = () => {
  const router = useRouter();
  const username = ref("");
  const password = ref("");
  let msg = ref("");
  const handleclick1 = () => {
    if (username.value && password.value) {
      if (
        username.value == localStorage.getItem("username") &&
        password.value == localStorage.getItem("password")
      ) {
        let sexif = "";
        if (localStorage.getItem("sex") == "男") {
          sexif = "先生";
        } else {
          sexif = "女士";
        }
        Dialog.confirm({
          title: "登录成功",
          message: `尊敬的:xxx${sexif}，欢迎光临`,
        })
          .then(() => {
            router.push("/home/index");
          })
          .catch(() => {
            username.value = "";
            password.value = "";
          });
        msg = "登录成功";
      } else {
        msg = "用户名或者密码错误，请重新输入";
        Dialog({ message: msg });
      }
    } else {
      msg = "用户名或者密码不能为空";
      Dialog({ message: msg });
    }
  };
  return { username, password, handleclick1, msg };
};
// 点击去注册页面
const gore = () => {
  const router = useRouter();
  const gotoregistry = () => {
    router.push("/registry");
  };
  return { gotoregistry };
};
// 返回前一个界面
const goback = () => {
  const router = useRouter();
  const GOback = () => {
    router.push("/home/index");
  };
  return { GOback };
};
</script>
<style lang="less" scoped>
.login {
  padding: 37px;
  .login-top {
    display: flex;
    align-items: center;
    margin-top: 100px;
    img {
      width: 40px;
      height: 40px;
      margin-right: 10px;
    }
  }
  .login-center {
    margin-top: 39px;
    input {
      width: 270px;
      line-height: 50px;
      margin-bottom: 10px;
      padding-left: 30px;
      font-size: 17px;
      border: 1px solid red;
    }
    button {
      width: 100%;
      border-radius: 50px;
      line-height: 50px;
      margin-top: 40px;
      border: 0;
      background-color: #3b98ff;
      color: white;
      font-size: 17px;
    }
    .goregistry {
      display: flex;
      justify-content: space-between;
      font-size: 16px;
      margin-top: 10px;
    }
    :hover {
      color: blue;
    }
  }
}
</style>
